<template>
  <div class="page_vue">
    <el-page-header @back="goBack">
      <template #content>
        <div class="enterprise_doc_back_title">
          <p>当前位置</p>
          <p> / {{ rowData.realName }}</p>
        </div>
      </template>
    </el-page-header>
    <div class="containers sa-flex">
      <ResizeBox :resize-conf="resizeConf">
        <!-- 左侧搜索和上传和新建部分 -->
        <create-upload-btn ref="CreateUploadBtnRefs" pageType="enterprise" :parentId="propsButtonObj.key || headNodeId"
          @createUploadBtnClick="createUploadBtnClick" @handleSelectSearch="handleSelectSearch" :name="rowData.realName"
          @pageTitleClick="pageTitleClick" :rowData="rowData">
        </create-upload-btn>
        <div class="left_tree_box">
          <el-tree ref="treeDocumentRefs" :data="managementList" :props="defaultProps" node-key="id" class="filter-tree"
            :current-node-key="currentId" :lazy="true" :load="loadNode" :filter-node-method="filterNode"
            :highlight-current="true" :default-expanded-keys="expandedKeys" :expand-on-click-node="false"
            @node-click="elTreeNodeClick">
            <template #default="{ node, data }">
              <span>
                <svg-icon :icon-class="node.expanded ? 'file-open' : 'file-close'"></svg-icon>
                <span>{{ node.label }}</span>
              </span>
            </template>
          </el-tree>
        </div>
      </ResizeBox>
      <div class="right sa-flex-1">
        <breadcrumb-nav pageType="self" :stratBreadList="stratBreadList" :breadList="breadList"
          @breadRouterClick="breadRouterClick"></breadcrumb-nav>
        <div class="table_box">
          <!--  -->
          <div v-if="isTableHeaderBtn" class="table_top_btn">
            <!--  @deleteClick="deleteFileClick(tableRowArray)"
                    @moveClick="openDocumentTreeAll('move', tableRowArray)"
                    @enjoyClick="openEnjoyDialog(tableRowArray, 'arr')"
                    @downloadClick="batchDownloadClick(tableRowArray)" -->
            <TableHeaderBtn pageType="enterprise" :tableRowArray="tableRowArray"
              @otherClick="tableHeaderBtn_otherClick" :rowData="rowData">
            </TableHeaderBtn>
          </div>
          <div v-if="isTableTopMoreText" class="table_top_more_text" @click="TopLoadMoreClick">加载更多</div>
          <el-table v-loading="tableLoading" ref="multipleTable" :data="tableData" tooltip-effect="dark"
            :highlight-current-row="true" :height="tableHeight" class="tableClass scrollTable"
            :class="[isTableTopMoreText ? 'table_top_more' : '']" :row-style="{ height: '50px' }"
            :header-row-style="{ height: '50px' }" :row-class-name="tableRowClassName"
            @selection-change="handleSelectionChange" @row-dblclick="handleRowDblClick" @row-click="handleRowClick"
            @row-contextmenu="rowContextmenuClick" @sort-change="changeTableSort"
            >
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column label="名称" :sortable="isTableHeaderBtnFunction()" prop="realName" show-overflow-tooltip>
              <template #default="scope">
                <div style="display: flex;align-items: center;">
                <div>   <svg-icon
                  :icon-class="selectSvgIcons(scope.row)"
                  style="font-size: 30px; vertical-align: middle; margin-right: 6px; position: relative"
                ></svg-icon>
                <div class="" style="width: 30px; height: 30px; position: absolute; top: 8px; left: 12px"></div>
                </div>
                  <div style="margin: 0;display: inline-block;">
                    <span class="realName_class" style="width: 100px;">
                      {{ scope.row.realName }}
                      {{ scope.row.suffix ? '.' + scope.row.suffix : '' }}
                    </span>
                    <p style="margin:0" v-if="scope.row.fileDatasetId"><el-tag size="small">问答文件</el-tag></p>
                  </div>
                </div>

              </template>
            </el-table-column>
            <el-table-column label="大小" width="110" :sortable="isTableHeaderBtnFunction()" prop="size">
              <!-- <template #default="scope">{{ scope.row.size | filterSizeUnit }}</template> -->
              <template #default="scope">{{ proxy?.$yuUtils.filterSizeUnit(scope.row.size) }}</template>
            </el-table-column>
            <el-table-column label="修改时间" width="160" :sortable="isTableHeaderBtnFunction()" prop="updateTime">
              <template #default="scope">{{ scope.row.updateTime ? scope.row.updateTime : scope.row.createTime
                }}</template>
            </el-table-column>
            <el-table-column label="操作" width="180px" prop="handle">
              <template #default="scope">
                <div class="realName_box">
                  <div class="realName_box_right">
                    <!-- <el-tooltip v-if="scope.row.type == 'file'" effect="dark" content="下载" placement="top-start" offset="8">
                  <div class="iconBox" @click.stop="downloadFileFunc(scope.row)">
                    <svg-icon icon-class="downloads" class="icon_size" style="font-size: 16px" />
                  </div>
                    </el-tooltip>-->
                    <el-tooltip effect="dark" content="详情" placement="top-start" :offset="8">
                      <div class="iconBox" @click.stop="openFileDetailClick(scope.row)">
                        <svg-icon icon-class="eye" class="icon_size"></svg-icon>
                      </div>
                    </el-tooltip>
                    <el-tooltip effect="dark" content="收藏" placement="top-start" :offset="8">
                      <div class="iconBox" @click.stop="FilesCollection(scope.row)">
                        <svg-icon v-if="scope.row.collection == '1'" icon-class="collect-fill"
                          class="icon_size"></svg-icon>
                        <svg-icon v-else icon-class="collect" class="icon_size"></svg-icon>
                      </div>
                    </el-tooltip>
                  </div>
                  <div>
                    <MoreList :rowItem="scope.row" pageType="self" @moreHandleCommand="moreHandleCommand" :rowData="rowData"></MoreList>
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <!-- 创建文件 -->
    <yu-create-folder ref="yuCreateFolderRef" pageType="enterprise"
      @confirmClick="realNameConfirmClick"></yu-create-folder>
    <!-- 详情页面 -->
    <Info ref="infoRefs" @fileDetailAll_moreHandleCommand="moreHandleCommand" />
    <!-- 分配权限弹窗 -->
    <assign-permissions ref="assignPermissionsRef" />
    <!-- 上传文件 -->
    <YiUploadFile ref="uploadFileRef" @uploadSuccess="refreshDatas" />
    <!-- 选择多维标签 -->
    <manyLable ref="manyLableRef" />
    <!-- 上传知识库封面 -->
    <UploadCover ref="uploadCoverRef" />
    <!-- ocr识别 -->
     <OcrFile ref="ocrFileRef" @refreshDatas="refreshDatas"/>
  </div>
</template>

<script setup lang="ts">
import { getCurrentInstance, onUnmounted, ref, onMounted } from 'vue';
import personDocApi from '@/api/personDoc/personDocApi';
import docMixins from './component/docMixins';
import ResizeBox from '@/views/components/yu-dragLayouter/ResizeBox.vue';
import CreateUploadBtn from '@/views/components/newUiModule/create-upload-btn.vue';
import YuCreateFolder from '@/views/components/yu-create-folder/yu-create-folder.vue';
import breadcrumbNav from '@/views/components/newUiModule/breadcrumb-nav.vue';
import TableHeaderBtn from '@/views/enterpriseDoc/component/enterpriseDoc/table-header-btn.vue';
import Info from '@/views/enterpriseDoc/component/enterpriseDoc/info.vue';
import AssignPermissions from '@/views/enterpriseDoc/component/enterpriseDoc/assign-permissions.vue';
import YiUploadFile from '@/views/components/yiUploadFile/uploadFile.vue';
import UploadCover from './component/uploadCover.vue';
import MoreList from '@/views/enterpriseDoc/component/enterpriseDoc//more-list.vue'; // 表格更多操作
import manyLable from '@/views/enterpriseDoc/component/enterpriseDoc/manyLable.vue';
import OcrFile from './component/enterpriseDoc/ocr-file.vue';
import { debounce } from '@/utils/yuUtils.js';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
import { useEnterpriseDocStore } from '@/store/modules/enterpriseDoc';
const router = useRouter();
const docStore = useEnterpriseDocStore();
const rowData: any = ref(docStore.row); // 获取父组件传递过来的数据
// 返回按钮
const goBack = () => {
  router.push('/newUi/enterprises/enterpriseList');
};
const configs = {
  requstApi: personDocApi,
  pageType: 'enterprise',
  rowData: rowData.value,
  uploadType: 'enterprise',
};
const {
  resizeConf,
  managementList,
  defaultProps,
  treeDocumentRefs,
  currentId,
  expandedKeys,
  headNodeId,
  propsButtonObj,
  yuCreateFolderRef,
  infoRefs,
  assignPermissionsRef,
  tableLoading,
  isTableTopMoreText,
  tableData,
  tableHeight,
  tableRowArray,
  isTableHeaderBtn,
  stratBreadList,
  breadList,
  multipleTable,
  createUploadBtnClick,
  handleSelectSearch,
  pageTitleClick,
  loadNode,
  filterNode,
  elTreeNodeClick,
  realNameConfirmClick,
  apiTreeFileSelectTreePage,
  TopLoadMoreClick,
  tableRowClassName,
  isTableHeaderBtnFunction,
  handleSelectionChange,
  handleRowDblClick,
  handleRowClick,
  rowContextmenuClick,
  changeTableSort,
  selectSvgIcons,
  openFileDetailClick,
  FilesCollection,
  moreHandleCommand,
  breadRouterClick,
  tableHeaderBtn_otherClick,
  onContextMenu,
  refreshDatas,
  uploadFileRef,
  manyLableRef,
  uploadCoverRef,
  ocrFileRef
} = docMixins(configs);



let previousScrollTop = 0; // 用于保存滚动条之前的位置
const scrollTableDom: any = ref('');

onMounted(() => {
  scrollTableDom.value = document.querySelector('.scrollTable .el-table__body-wrapper .el-scrollbar__wrap');
  scrollTableDom.value.addEventListener('scroll', handleTableScroll);
});

onUnmounted(() => {
  sessionStorage.removeItem('expandedKeys');
  scrollTableDom.value.removeEventListener('scroll', handleTableScroll);
});

const handleTableScroll = debounce((event) => {
  const table = event.target;
  const scrollPosition = table.scrollHeight - table.scrollTop - table.clientHeight;
  console.log('🚀 ~ handleTableScroll ~ scrollPosition:', scrollPosition);

  if (scrollPosition <= 5) {
    apiTreeFileSelectTreePage('');
    console.log(1234);
  }
}, 300); // 调整延迟时间以适应你的需求
</script>

<style scoped lang="scss">
.el-page-header {
  padding: 5px 10px;
  border-bottom: 1px solid #eee;
}

.enterprise_doc_back_title {
  display: flex;
  gap: 10px;
  align-items: center;

  p {
    margin: 0;
    font-size: 14px;
    color: #303133;
  }
}

.page_vue {
  height: calc(100vh - 50px);

  .table_box {
    margin-left: 10px;
    position: relative;

    .tableClass {
      width: 100%;
      border-color: rgba(0, 0, 0, 0);
    }

    :deep(th) {
      color: #333;
      font-weight: normal;
    }

    :deep(.descending .sort-caret.descending) {
      border-top-color: #6698ff;
    }

    :deep(.ascending .sort-caret.ascending) {
      border-bottom-color: #6698ff;
    }

    :deep(td.el-table__cell) {
      border-bottom: 1px solid #eee;
    }

    :deep(.el-table__body tr:hover .realName_box_right) {
      visibility: visible;
    }

    .el-table :deep(.el-table__header-wrapper th) {
      background-color: #ffffff !important;
    }

    .el-table :deep(.table_row_topmark) {
      background: rgba(102, 152, 255, 0.1) !important;
    }

    // ::v-deep .el-table th div {
    //   display: inline-flexb;
    // }
  }
}

/**拖拽--start */
.sa-flex {
  display: flex;
  flex-wrap: no-wrap;
}

.sa-flex-1 {
  flex: 1;
  overflow: auto;
  border-left: 1px solid #eee;
}

.containers {
  background: #ffffff !important;
  // min-height: 600px;
}

/**拖拽-end */
.left_tree_box {
  width: calc(100% - 4px);
  font-size: 14px;
  height: calc(100vh - 50px);
  overflow: auto;
}

.btn_box {
  height: 48px;
}

.table_top_more_text {
  position: absolute;
  top: 50px;
  width: calc(100% - 10px);
  z-index: 1;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 13px;
  color: #016cff;
  cursor: pointer;
}

.realName_box {
  display: flex;
  // justify-content: space-between;
  // justify-content: flex-end;
  align-items: center;
}

.realName_box_right {
  display: flex;
  align-items: center;
  visibility: hidden;

  .iconBox {
    padding: 7px 8px 2px;
    border-radius: 4px;
    cursor: pointer;

    &:hover {
      color: #6698ff;
      background: rgba(102, 152, 255, 0.1);
    }
  }
}

.icon_size {
  font-size: 18px;
}

.table_top_btn {
  width: 100%;
  position: absolute;
  height: 48px;
  display: flex;
  align-items: center;
  margin-left: 55px;
  background-color: #ffffff;
  z-index: 10;
}

// :deep(.el-table__body-wrapper) {
//   height: calc(100vh - 180px);
//   flex: none;
// }
.table_box{
  :deep(.el-table__inner-wrapper){
  height: 910px !important;
}
}

</style>